@import '~styles/config.scss';

.showDataMain {
    
    .ul {
        display              : grid;
        grid-gap             : 10px;
        grid-template-columns: repeat(auto-fit, 240px);
    }

    .li {

        background   : #fff;
        display      : flex;
        border-radius: 6px;
        overflow     : hidden;
        padding      : 8px;
        border       : 1px solid $--border-color-extra-light;
        cursor       : pointer;
        transition   : all .3s;

        &.selected {
            border    : 1px solid $--color-primary;
            background: $--background-color-primary-light;
        }

        &.disabled {
            opacity: .5;
        }

        .albumUrl {
            display: block;
            width  : 100%;
            height : 100%;

        }


        .s1 {
            background   : $--background-color-base;
            padding      : 0px 3px;
            border-radius: 3px;
            font-size    : 12px;
            margin-right : 3px;
            border       : 1px solid $--border-color-lighter;
        }

        .img {
            position     : relative;
            flex         : none;
            width        : 70px;
            height       : 70px;
            overflow     : hidden;
            border-radius: 4px;
            border       : 1px solid #fff;
        }


        .text {
            position    : relative;
            flex        : auto;
            overflow    : hidden;
            padding-left: 10px;

            .name {
                overflow     : hidden;
                text-overflow: ellipsis;
                white-space  : nowrap;
                line-height  : 20px;
                font-size    : 14px;
            }

            .sort {
                font-size  : 12px;
                line-height: 30px;
                color      : $--color-text-secondary;
            }

            .price {
                font-size  : 12px;
                color      : $--color-text-regular;
                line-height: 20px;
            }

            .del {
                position: absolute;
                padding : 0px 8px;
                height  : 20px;
                bottom  : 5px;
                right   : 0px;
                color   : $--color-text-secondary;

                i {
                    font-size: 12px;
                }

                &:hover {
                    color: $--color-danger;
                }
            }


        }


    }
}